<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">订单管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <el-row>
                <el-col :span="8">
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>
            </el-row>

            <el-table :data="orderList" border>
                <el-table-column type="index" label="序号" align="center" width="50px"></el-table-column>
                <el-table-column prop="order_number" label="订单编号"></el-table-column>
                <el-table-column prop="order_price" label="订单价格" width="80px"></el-table-column>
                <el-table-column label="是否付款">
                    <template slot-scope="{row}">
                        <el-tag v-if="+row.pay_status===0" type="warning">未支付</el-tag>
                        <el-tag v-else type="success">已支付</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="是否发货" width="80px">
                    <template slot-scope="{row}">
                        <span v-if="row.is_send==='是'">是</span>
                        <span v-else>否</span>
                    </template>
                </el-table-column>

                <el-table-column label="下单时间">
                    <template slot-scope="{row}">
                        <span>{{row.create_time | dateFormat}}</span>
                    </template>
                </el-table-column>

                <el-table-column>
                    <template slot-scope="{row}">
                        <el-button @click="openupdataAddressDialog" type="primary" icon="el-icon-edit" size="mini"></el-button>
                        <el-button type="success" icon="el-icon-setting" size="mini" @click="checkProgress(row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination @size-change="handleSizeChange" @current-change="getAllOrder"
                :current-page="queryInfo.pagenum" :page-sizes="[5, 10, 20, 30]" :page-size="queryInfo.pagesize"
                layout=" prev, pager, next, jumper,->, sizes,total" :total="total">
            </el-pagination>
        </el-card>

        <!-- 修改地址 -->
        <el-dialog title="收货地址" :visible.sync="dialogFormUpdataAddressVisible" @close="closeUpdataAddressDialog">
            <el-form :model="addressForm" :rules="addressFormRule" ref="addressFormRef" label-width="100px">
                <el-form-item label="省市区/县" prop="address1">
                    <el-cascader v-model="addressForm.address1" :options="cityData" @change="handleChange"></el-cascader>
                </el-form-item>

                <el-form-item label="详细地址" prop="address2">
                    <el-input v-model="addressForm.address2"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormUpdataAddressVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormUpdataAddressVisible = false">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 查看物流进度 -->
        <el-dialog title="物流信息" :visible.sync="dialogForCheckoutProgressVisible" width="50%">
            <el-timeline :reverse="true">
                <el-timeline-item v-for="(activity, index) in progressInfo" :key="index" :timestamp="activity.timestamp">
                    {{activity.context}}
                </el-timeline-item>
        </el-timeline>
        </el-dialog>
    </div>
</template>

<script>
import cityData from '../../api/order/citydata'
export default {
  name: 'Order',

  data () {
    return {
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10,
        user_id: '',
        pay_status: '',
        is_send: '',
        order_fapiao_title: '',
        order_fapiao_company: '',
        order_fapiao_content: '',
        consignee_addr: ''
      },
      total: 0,
      orderList: [],
      dialogFormUpdataAddressVisible: false,

      addressForm: {
        address1: [],
        address2: ''
      },
      addressFormRule: {
        address1: [
          { required: true, message: '请选择省市区/县', trigger: 'blur' }
        ],
        address2: [
          { required: true, message: '请填写详细地址', trigger: 'blur' }
        ]
      },
      cityData: cityData,

      dialogForCheckoutProgressVisible: false,

      progressInfo: []
    }
  },

  created () {
    this.getAllOrder()
  },

  methods: {
    async getAllOrder (pager = 1) {
      this.queryInfo.pagenum = pager
      const { data, meta } = await this.$http.orders.getAllOrder(this.queryInfo)
      console.log('data,meta: ', data, meta)

      if (meta.status === 200) {
        this.orderList = data.goods
        this.total = data.total
      }
    },

    handleSizeChange (pagesize) {
      this.queryInfo.pagesize = pagesize
      this.getAllOrder()
    },

    openupdataAddressDialog () {
      this.dialogFormUpdataAddressVisible = true
    },

    handleChange () {

    },

    // 关闭修改对话框事件
    closeUpdataAddressDialog () {
      this.addressForm.address1 = []

      this.$refs.addressFormRef.resetFields()
    },

    // 查看物流进度
    async checkProgress (row) {
      const { code, data } = await this.$http.orders.checkoutProgress()
      console.log('code,data: ', code, data)
      if (code === 200) {
        this.progressInfo = data.data
      }

      this.dialogForCheckoutProgressVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
    .el-table {
        margin: 20px 0;
    }
    .el-pagination {
        margin: 20px 0;
        text-align: center;
    }
</style>
